import * as React from 'react';
import { Link } from 'react-router-dom';

import { Container, Row, Col } from '../../components/layout';
import { List, ListItem, ListTitle } from '../../components/list';
import { Card } from '../../components/card';

import Apis from '../../apis';

import { User } from '../../models/user';
import { Post } from '../../models/post';

type PropsType = {
  user: User;
};

type StatesType = {
  posts: Post[];
  loading: boolean;
};

export default class RealWorkSpacePage extends React.Component<PropsType> {
  state: StatesType = {
    loading: true,
    posts: [],
  };

  async componentDidMount() {
    await this.loadPost();
  }

  async loadPost() {
    this.setState({ loading: true });
    const postList = await Apis.Post.getPostList();
    this.setState({ posts: postList, loading: false });
  }

  render() {
    const { posts } = this.state;
    return (
      <Container>
        <div>real workspace</div>
        <Row>
          <Col col={3}>
            <List type="primary">
              <ListTitle>文章列表</ListTitle>
              {posts.map((post, index) => (
                <ListItem key={index}>
                  <Link to={`/p/${post.postId}`}>{post.title}</Link>
                </ListItem>
              ))}
            </List>
          </Col>
          <Col>
            <pre>{JSON.stringify(this.props.user, null, '  ')}</pre>
          </Col>
        </Row>
      </Container>
    );
  }
}
